<!DOCTYPE HTML>
<html lang="en-US">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>S9060</title>
    <meta name="description" content="提供用户体验设计与互联网品牌建设，原型图设计 、UI界面设计、网站设计开发、移动界面设计、软件界面设计、logo设计、创意设计、视频剪辑、视频制作等服务">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Favicon -->
    <!-- <link type="image/png" href="/static/image/favicon.ico" rel="shortcut icon"> -->
    <!-- <link rel="SHORTCUT ICON"
        href="https://www.digistore24.com/pb/webinc/2844db94/images/brand/digistore/favicons/favicon.png"
        type="image/png"> -->
    <link rel="SHORTCUT ICON" href="/static/image/favicon.png" type="image/png">

    <!-- bootstrap CSS -->
    <link rel="stylesheet" href="static/css/bootstrap.min.css" type="text/css" media="all">
    <!-- carousel CSS -->
    <link rel="stylesheet" href="static/css/owl.carousel.min.css" type="text/css" media="all">

    <!-- nivo-slider CSS -->
    <link rel="stylesheet" href="static/css/nivo-slider.css" type="text/css" media="all">
    <!-- animate CSS -->
    <link rel="stylesheet" href="static/css/animate.css" type="text/css" media="all">
    <!-- animated-text CSS -->
    <link rel="stylesheet" href="static/css/animated-text.css" type="text/css" media="all">
    <!-- font-awesome CSS -->
    <link rel="stylesheet" href="static/css/all.min.css" type="text/css" media="all">
    <!-- font-flaticon CSS -->
    <link rel="stylesheet" href="static/css/flaticon.css" type="text/css" media="all">
    <!-- theme-default CSS -->
    <link rel="stylesheet" href="static/css/theme-default.css" type="text/css" media="all">
    <!-- meanmenu CSS -->
    <link rel="stylesheet" href="static/css/meanmenu.min.css" type="text/css" media="all">
    <link rel="stylesheet" href="static/css/font-awesome.min.css" type="text/css" media="all">
    <!-- Main Style CSS -->
    <link rel="stylesheet" href="static/css/style.css" type="text/css" media="all">
    <!-- transitions CSS -->
    <link rel="stylesheet" href="static/css/owl.transitions.css" type="text/css" media="all">
    <!-- venobox CSS -->
    <link rel="stylesheet" href="static/css/venobox.css" type="text/css" media="all">
    <!-- widget CSS -->
    <link rel="stylesheet" href="static/css/widget.css" type="text/css" media="all">
    <!-- responsive CSS -->
    <link rel="stylesheet" href="static/css/responsive.css" type="text/css" media="all">
    <!-- modernizr js -->
    <script src="static/js/modernizr-3.5.0.min.js"></script>
    <link href='static/css/css.css' rel='stylesheet' type='text/css'>
    <link href='static/css/index.css' rel='stylesheet' type='text/css'>

</head>

<body>
    <div class="main-header">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <div id="sticky-header" class="nav-menu">
                        <div class="header-logo">
                            <a href="">
                                <!-- <img src="static/picture/logo.png" alt=""> -->
                                <img class="logo-1" src="static/image/logo/logo-1.png" alt="">
                            </a>
                            <a class="main_sticky" href="">
                                <!-- <img src="static/picture/logo.png" alt=""> -->
                                <img class="logo-1" src="static/image/logo/logo-1.png" alt="">
                            </a>
                        </div>
                        <div class="heder-menu">
                            <ul>
                                <li><a href="#home">HOME </a></li>
                                <!-- <li><a href="#about">about </a></li> -->
                                <li><a href="#services">服务范围</a></li>
                                <!-- <li><a href="#resum">resum </a></li> -->
                                <li><a href="#portfolio">作品展示 </a></li>
                                <!-- <li><a href="#blog">blog </a></li> -->
                                <li><a href="#contact">联系方式 </a></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- ============================================================== -->
    <!-- Start - Mobile-Menu- Section -->
    <!-- ============================================================= -->
    <div class="mobile-menu-area d-sm-block d-md-block d-lg-none ">
        <div class="mobile-menu">
            <nav class="itsoft_menu">
                <ul class="nav_scroll">
                    <li><a href="#home">HOME </a></li>
                    <!-- <li><a href="#about">about </a></li> -->
                    <li><a href="#services">服务范围</a></li>
                    <!-- <li><a href="#resum">resum </a></li> -->
                    <li><a href="#portfolio">作品展示 </a></li>
                    <!-- <li><a href="#blog">blog </a></li> -->
                    <li><a href="#contact">联系方式 </a></li>
                </ul>
            </nav>
        </div>
    </div>
    <!-- ============================================================== -->
    <!-- Start -slider-area -->
    <!-- ============================================================= -->
    <div class="slider-area d-flex align-items-center" id="home">
        <div class="container">
            <div class="row d-flex align-items-center">
                <div class="single-slider-box">
                    <div class="slider-content">
                        <div class="slider-title">
                            <h1>hello<span>.</span></h1>
                            <h3>时间 - 信念 - 专心 - 追求</h3>
                            <p>设计不仅仅是视觉和感觉上如何</p>
                        </div>
                    </div>
                    <!-- <div class="slider-button">
                        <a href="#"><i class="flaticon-download"></i> Download CV</a>
                    </div> -->
                </div>
            </div>
            <div class="bottom-btn">
                <a href="#">Ch <span>ZN</span></a>
            </div>
            <div class="slider-icon">
                <ul>
                    <li><a href="#"><i class="fab fa-facebook-f"></i></a></li>
                    <li><a href="#"><i class="fab fa-twitter"></i></a></li>
                    <li><a href="#"><i class="fab fa-linkedin-in"></i></a></li>
                    <li><a href="#"><i class="fab fa-instagram"></i></a></li>
                </ul>
            </div>
            <!-- 视频 -->
            <!-- <div class="slider-video">
                <div class="slider-video-icon">
                    <a class="video-vemo-icon venobox vbox-item" data-vbtype="youtube" data-autoplay="true"
                        href="javascript:;"><i class="fas fa-play"></i></a>
                </div>
            </div> -->
        </div>
    </div>
    <!--==================================================-->
    <!-- Start about-area -->
    <!-- 隐藏 -->
    <!--==================================================-->
    <div class="about-area d-none" id="about">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <div class="section-title text-center">
                        <h5>BIOGRAPHY</h5>
                        <h3>Who am I?</h3>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-lg-6 col-md-6">
                    <div class="about-thumb">
                        <img src="static/picture/single.png" alt="">
                    </div>
                </div>
                <div class="col-lg-6 col-md-6">
                    <div class="about-title">
                        <h5>About Me</h5>
                        <h3>Emma Watson's Details</h3>
                        <p>Monotonectally orchestrate professionals supply chains whereas are metrics. Globally
                            procrastinate backward-compatible application the action items. Collaboratively enhance
                            extensibl collaboration and it's through interdependent
                            opportunities.</p>
                    </div>
                    <div class="row">
                        <div class="col-lg-6">
                            <div class="right-box upper">
                                <div class="content">
                                    <h2>Name</h2>
                                    <p>Emma Watson</p>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-6">
                            <div class="right-box">
                                <div class="content">
                                    <h2>Emill</h2>
                                    <p>example@yahoo.com</p>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-6">
                            <div class="right-box">
                                <div class="content">
                                    <h2>Address</h2>
                                    <p>Gulshan-1, Dhaka-1212</p>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-6">
                            <div class="right-box">
                                <div class="content">
                                    <h2>Phone No.</h2>
                                    <p>+99 123 (456) 789</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="right-btn">
                        <a href="#"><i class="flaticon-download"></i> Download CV</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--==================================================-->
    <!-- Start service Area -->
    <!--==================================================-->
    <div class="service-area" id="services">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <div class="section-title text-center">
                        <h5>Services</h5>
                        <h3>服务范围</h3>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-lg-4">
                    <div class="single-service-box">
                        <div class="service-content">
                            <div class="service-icon">
                                <i class="flaticon flaticon-pen"></i>
                            </div>
                            <div class="service-title">
                                <h2>用户界面/用户体验设计</h2>
                                <p>用户界面设计, 交互设计, 视觉设计/PPT设计, 用户体验设计</p>
                            </div>
                        </div>
                        <div class="service-button">
                            <!-- <a href="JavaScript: void(0)">Read more</a> -->
                            <!-- &nbsp; &emsp; -->
                            <!-- <a href="JavaScript: void(0)">Read&emsp;&emsp;&emsp;</a> -->
                            <a href="JavaScript: void(0)">Read - 查看</a>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4">
                    <div class="single-service-box">
                        <div class="service-content">
                            <div class="service-icon">
                                <i class="flaticon flaticon-analytics"></i>
                            </div>
                            <div class="service-title">
                                <h2>移动端设计</h2>
                                <p>iOS/安卓App设计, 小程序设计, 移动端界面设计</p>
                            </div>
                        </div>
                        <div class="service-button">
                            <a href="JavaScript: void(0)">Read - 查看</a>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4">
                    <div class="single-service-box">
                        <div class="service-content">
                            <div class="service-icon">
                                <i class="flaticon flaticon-play-button-1"></i>
                            </div>
                            <div class="service-title">
                                <h2>视频制作</h2>
                                <p>视频剪辑/视频动效/GIF动效, 产品拍摄, 脚本撰写</p>
                            </div>
                        </div>
                        <div class="service-button">
                            <a href="JavaScript: void(0)">Read - 查看</a>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4">
                    <div class="single-service-box">
                        <div class="service-content">
                            <div class="service-icon">
                                <i class="flaticon flaticon-project-management"></i>
                            </div>
                            <div class="service-title">
                                <h2>C4D/2.5D</h2>
                                <p>C4D视觉界面设计, 2.5D风格设计, 空间感和立体感</p>
                            </div>
                        </div>
                        <div class="service-button">
                            <a href="JavaScript: void(0)">Read - 查看</a>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4">
                    <div class="single-service-box">
                        <div class="service-content">
                            <div class="service-icon">
                                <i class="flaticon flaticon-monitor-1"></i>
                            </div>
                            <div class="service-title">
                                <h2>网页设计</h2>
                                <p>网站策划, 网站设计, 网站建设, 网络推广, 用户体验设计</p>
                            </div>
                        </div>
                        <div class="service-button">
                            <a href="JavaScript: void(0)">Read - 查看</a>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4">
                    <div class="single-service-box">
                        <div class="service-content">
                            <div class="service-icon">
                                <i class="flaticon flaticon-code"></i>
                            </div>
                            <div class="service-title">
                                <h2>Web 开发</h2>
                                <p>HTML+CSS静态/动态网站搭建, 网站开发制作</p>
                            </div>
                        </div>
                        <div class="service-button">
                            <a href="JavaScript: void(0)">Read - 查看</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--==================================================-->
    <!-- Start resume section -->
    <!-- 隐藏 -->
    <!--==================================================-->
    <div class="resume-section d-none" id="resum">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <div class="section-title text-center">
                        <h5>7+ YEAR EXPERIENCE</h5>
                        <h3>My Resume<span>.</span></h3>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-lg-12">
                    <div class="accordion-tabs">
                        <!-- Toggle radio buttons -->
                        <input type="radio" name="tabs-activate" id="tab-one" class="activate-tab" checked="">
                        <input type="radio" name="tabs-activate" id="tab-two" class="activate-tab">
                        <input type="radio" name="tabs-activate" id="tab-three" class="activate-tab">
                        <div class="tabs text-center">
                            <!-- Visible tabs -->
                            <label for="tab-one" id="tab-one-label" class="tab">Education</label>
                            <label for="tab-two" id="tab-two-label" class="tab">Skills</label>
                            <label for="tab-three" id="tab-three-label" class="tab">Experience</label>
                            <!-- Tab content -->
                            <div id="tab-one-tab-content" class="tab-content active">
                                <div class="shap-img">
                                    <img src="static/picture/border.png" alt="">
                                </div>
                                <div class="shaps-imgs">
                                    <img src="static/picture/border2.png" alt="">
                                </div>
                                <div class="row">
                                    <div class="col-lg-6 col-md-6">
                                        <div class="box-top upper">
                                            <h2>Educational Quality</h2>
                                        </div>
                                        <div class="single-resume-box">
                                            <div class="resume-content">
                                                <div class="resume-tile">
                                                    <h3>Master Degree in CSE</h3>
                                                    <h5>University DIU (1998 - 2003)</h5>
                                                    <p>Pellentesque at posuere tellus phasellus scelerisque porem.</p>
                                                    <span>4.50/5</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-6 col-md-6">
                                        <div class="box-top">
                                            <h2>Training Summary</h2>
                                        </div>
                                        <div class="single-resume-box">
                                            <div class="resume-content">
                                                <div class="resume-tile">
                                                    <h3>Web Development</h3>
                                                    <h5>University DIU (1998 - 2003)</h5>
                                                    <p>Pellentesque at posuere tellus phasellus scelerisque porem.</p>
                                                    <span>4.50/5</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-6 col-md-6">
                                        <div class="single-resume-box">
                                            <div class="resume-content">
                                                <div class="resume-tile">
                                                    <h3>BSC In Computer Science</h3>
                                                    <h5>University DIU (1998 - 2003)</h5>
                                                    <p>Pellentesque at posuere tellus phasellus scelerisque porem.</p>
                                                    <span>4.50/5</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-6 col-md-6">
                                        <div class="single-resume-box">
                                            <div class="resume-content">
                                                <div class="resume-tile">
                                                    <h3>Programming</h3>
                                                    <h5>University DIU (1998 - 2003)</h5>
                                                    <p>Pellentesque at posuere tellus phasellus scelerisque porem.</p>
                                                    <span>4.50/5</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-6 col-md-6">
                                        <div class="single-resume-box">
                                            <div class="resume-content">
                                                <div class="resume-tile">
                                                    <h3>Diploma in Graphic Design</h3>
                                                    <h5>University DIU (1998 - 2003)</h5>
                                                    <p>Pellentesque at posuere tellus phasellus scelerisque porem.</p>
                                                    <span>4.50/5</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-6 col-md-6">
                                        <div class="single-resume-box">
                                            <div class="resume-content">
                                                <div class="resume-tile">
                                                    <h3>Web UI/UX Design</h3>
                                                    <h5>University DIU (1998 - 2003)</h5>
                                                    <p>Pellentesque at posuere tellus phasellus scelerisque porem.</p>
                                                    <span>4.50/5</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div id="tab-two-tab-content" class="tab-content">
                                <div class="row">
                                    <div class="col-lg-6 col-md-6">
                                        <div class="box-top">
                                            <h2>Industrial Skills</h2>
                                        </div>
                                        <div class="prossess-ber-plugin">
                                            <span class="prosses-bar">Video Editing</span>
                                            <div id="bar1" class="barfiller">
                                                <div class="tipWrap">
                                                    <span class="tip"></span>
                                                </div>
                                                <span class="fill my-class" data-percentage="90"></span>
                                            </div>
                                            <span class="prosses-bar">Animation Design</span>
                                            <div id="bar2" class="barfiller">
                                                <div class="tipWrap">
                                                    <span class="tip"></span>
                                                </div>
                                                <span class="fill my-class3" data-percentage="80"></span>
                                            </div>
                                            <span class="prosses-bar">Photography</span>
                                            <div id="bar3" class="barfiller">
                                                <div class="tipWrap">
                                                    <span class="tip"></span>
                                                </div>
                                                <span class="fill my-class3" data-percentage="85"></span>
                                            </div>
                                            <span class="prosses-bar">Videography</span>
                                            <div id="bar4" class="barfiller">
                                                <div class="tipWrap">
                                                    <span class="tip"></span>
                                                </div>
                                                <span class="fill my-class3" data-percentage="70"></span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-6 col-md-6">
                                        <div class="box-top">
                                            <h2>Professional Skills</h2>
                                        </div>
                                        <div class="prossess-ber-plugin">
                                            <span class="prosses-bar">UI/UX Design</span>
                                            <div id="bar5" class="barfiller">
                                                <div class="tipWrap">
                                                    <span class="tip"></span>
                                                </div>
                                                <span class="fill my-class" data-percentage="90"></span>
                                            </div>
                                            <span class="prosses-bar">App Development</span>
                                            <div id="bar6" class="barfiller">
                                                <div class="tipWrap">
                                                    <span class="tip"></span>
                                                </div>
                                                <span class="fill my-class3" data-percentage="80"></span>
                                            </div>
                                            <span class="prosses-bar">Photography</span>
                                            <div id="bar7" class="barfiller">
                                                <div class="tipWrap">
                                                    <span class="tip"></span>
                                                </div>
                                                <span class="fill my-class3" data-percentage="85"></span>
                                            </div>
                                            <span class="prosses-bar">Web Design</span>
                                            <div id="bar8" class="barfiller">
                                                <div class="tipWrap">
                                                    <span class="tip"></span>
                                                </div>
                                                <span class="fill my-class3" data-percentage="70"></span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div id="tab-three-tab-content" class="tab-content">
                                <div class="shap-img">
                                    <img src="static/picture/border.png" alt="">
                                </div>
                                <div class="shaps-imgs">
                                    <img src="static/picture/border2.png" alt="">
                                </div>
                                <div class="row">
                                    <div class="col-lg-6 col-md-6">
                                        <div class="box-top upper">
                                            <h2>Master Degree in CSE</h2>
                                        </div>
                                        <div class="single-resume-box">
                                            <div class="resume-content">
                                                <div class="resume-tile">
                                                    <h3>Master Degree in CSE</h3>
                                                    <h5>University DIU (1998 - 2003)</h5>
                                                    <p>Pellentesque at posuere tellus phasellus scelerisque porem.</p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-6 col-md-6">
                                        <div class="box-top">
                                            <h2>Web Development</h2>
                                        </div>
                                        <div class="single-resume-box">
                                            <div class="resume-content">
                                                <div class="resume-tile">
                                                    <h3>Web Development</h3>
                                                    <h5>University DIU (1998 - 2003)</h5>
                                                    <p>Pellentesque at posuere tellus phasellus scelerisque porem.</p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-6 col-md-6">
                                        <div class="single-resume-box">
                                            <div class="resume-content">
                                                <div class="resume-tile">
                                                    <h3>BSC In Computer Science</h3>
                                                    <h5>University DIU (1998 - 2003)</h5>
                                                    <p>Pellentesque at posuere tellus phasellus scelerisque porem.</p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-6 col-md-6">
                                        <div class="single-resume-box">
                                            <div class="resume-content">
                                                <div class="resume-tile">
                                                    <h3>Programming</h3>
                                                    <h5>University DIU (1998 - 2003)</h5>
                                                    <p>Pellentesque at posuere tellus phasellus scelerisque porem.</p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-6 col-md-6">
                                        <div class="single-resume-box">
                                            <div class="resume-content">
                                                <div class="resume-tile">
                                                    <h3>Diploma in Graphic Design</h3>
                                                    <h5>University DIU (1998 - 2003)</h5>
                                                    <p>Pellentesque at posuere tellus phasellus scelerisque porem.</p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-6 col-md-6">
                                        <div class="single-resume-box">
                                            <div class="resume-content">
                                                <div class="resume-tile">
                                                    <h3>Web UI/UX Design</h3>
                                                    <h5>University DIU (1998 - 2003)</h5>
                                                    <p>Pellentesque at posuere tellus phasellus scelerisque porem.</p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--==================================================-->
    <!-- Start brand Area-->
    <!-- 隐藏 -->
    <!--==================================================-->
    <div class="brand-area d-none">
        <div class="container">
            <div class="row">
                <div class="owl-carousel brand_list">
                    <div class="col-lg-3">
                        <div class="single-brand-box">
                            <div class="brand-thumb">
                                <img src="static/picture/br1.png" alt="">
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-3">
                        <div class="single-brand-box">
                            <div class="brand-thumb">
                                <img src="static/picture/b4.png" alt="">
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-3">
                        <div class="single-brand-box">
                            <div class="brand-thumb">
                                <img src="static/picture/br5.png" alt="">
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-3">
                        <div class="single-brand-box">
                            <div class="brand-thumb">
                                <img src="static/picture/br2.png" alt="">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--==================================================-->
    <!-- Start  portfolio Area -->
    <!-- 设计作品 -->
    <!--==================================================-->
    <div class="portfolio-area" id="portfolio">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <div class="section-title">
                        <div class="sub-title">
                            <h5>portfolio</h5>
                        </div>
                        <div class="main-title">
                            <h3>
                                作品展示
                                <!-- <span>.</span> -->
                            </h3>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-lg-12 col-sm-12">
                    <div class="portfolio_nav text-center">
                        <div class="portfolio_menu">
                            <ul class="menu-filtering">
                                <li class="current_menu_item" data-filter="*">all </li>
                                <li data-filter=".ui-ux">UI/UX设计</li>
                                <li data-filter=".p-design">平面设计</li>
                                <li data-filter=".v-demo">视频/动效设计</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row image_load">
                <div class="col-lg-4 col-md-6 col-sm-12 grid-item ui-ux">
                    <div class="project-single-box">
                        <div class="project-thumb imgbox">
                            <img src="static/image/details/ui-ux/app01/0_home-2.jpg" alt="">
                            <div class="textbox"><span>数字家居APP</span></div>
                            <div class="project-content">
                                <div class="project-title">
                                    <span> Design </span>
                                    <h3><a href="./view/App-1.html"><span>S</span>9060 数字家居APP</a></h3>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 col-md-6 col-sm-12 grid-item biology maths p-design">
                    <div class="project-single-box">
                        <div class="project-thumb imgbox">
                            <img src="static/image/details/vi-haibao/VI01/0_home.webp" alt="">
                            <div class="textbox"><span>咖鹿林咖啡视觉识别</span></div>
                            <div class="project-content">
                                <div class="project-title">
                                    <span> Design </span>
                                    <h3><a href="./view/VI-1.html"><span>S</span>9060 咖鹿林咖啡</a></h3>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 col-md-6 col-sm-12 grid-item english maths ui-ux v-demo">
                    <div class="project-single-box">
                        <div class="project-thumb imgbox">
                            <img src="static/image/details/ui-ux/app02/0_home.jpg" alt="">
                            <div class="textbox"><span>易厨APP</span></div>
                            <div class="project-content">
                                <div class="project-title">
                                    <span> Design </span>
                                    <h3><a href="./view/App-2.html"><span>S</span>9060 易厨APP</a></h3>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 col-md-6 col-sm-12 grid-item engi biology p-design">
                    <div class="project-single-box">
                        <div class="project-thumb imgbox">
                            <img src="static/image/details/vi-haibao/Web01/0_home.jpg" alt="">
                            <div class="textbox"><span>家居网页</span></div>
                            <div class="project-content">
                                <div class="project-title">
                                    <span> Web </span>
                                    <h3><a href="./view/Web-1.html"><span>S</span>9060 家居网页设计</a></h3>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 col-md-6 col-sm-12 grid-item maths p-design">
                    <div class="project-single-box">
                        <div class="project-thumb imgbox">
                            <img src="static/image/details/vi-haibao/Books01/0_home.jpg" alt="">
                            <div class="textbox"><span>书籍设计</span></div>
                            <div class="project-content">
                                <div class="project-title">
                                    <span> Books </span>
                                    <h3><a href="./view/Books-1.html"><span>S</span>9060 书籍设计</a></h3>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 col-md-6 col-sm-12 grid-item maths p-design">
                    <div class="project-single-box">
                        <div class="project-thumb imgbox">
                            <img src="static/image/details/vi-haibao/TianMao01/0_home.jpg" alt="">
                            <div class="textbox"><span>天猫双11专题页设计</span></div>
                            <div class="project-content">
                                <div class="project-title">
                                    <span> Design </span>
                                    <h3><a href="./view/TianMao-1.html"><span>S</span>9060 天猫双11专题页设计</a></h3>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 col-md-6 col-sm-12 grid-item maths p-design">
                    <div class="project-single-box">
                        <div class="project-thumb imgbox">
                            <img src="static/image/details/vi-haibao/Fonts01/0_home.jpg" alt="">
                            <div class="textbox"><span>字体设计</span></div>
                            <div class="project-content">
                                <div class="project-title">
                                    <span> Fonts </span>
                                    <h3><a href="./view/Fonts-1.html"><span>S</span>9060 字体设计</a></h3>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 col-md-6 col-sm-12 grid-item maths ui-ux">
                    <div class="project-single-box">
                        <div class="project-thumb imgbox">
                            <img src="static/image/details/ui-ux/app04/0_home.jpg" alt="">
                            <div class="textbox"><span>易快照APP</span></div>
                            <div class="project-content">
                                <div class="project-title">
                                    <span> Fonts </span>
                                    <h3><a href="./view/App-3.html"><span>S</span>9060 易快照APP</a></h3>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 col-md-6 col-sm-12 grid-item v-demo maths">
                    <div class="project-single-box">
                        <div class="project-thumb">
                            <img src="static/picture/p3.jpg" alt="">
                            <div class="project-content">
                                <div class="project-title">
                                    <span> Marketing </span>
                                    <h3><a href="#">更多作品正在整合中...</a></h3>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--==================================================-->
    <!-- Start counter-area -->
    <!-- 隐藏 -->
    <!--==================================================-->
    <div class="counter-area d-none">
        <div class="container">
            <div class="row">
                <div class="col-lg-3 col-md-6">
                    <div class="single-counter-box">
                        <div class="counter-content">
                            <div class="counter-title">
                                <h1><span class="aa">3</span><span>k</span></h1>
                                <h5>Project Done</h5>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-3 col-md-6">
                    <div class="single-counter-box">
                        <div class="counter-content">
                            <div class="counter-title">
                                <h1><span class="aa">98</span><span>+</span></h1>
                                <h5>Happy Clients</h5>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-3 col-md-6">
                    <div class="single-counter-box">
                        <div class="counter-content">
                            <div class="counter-title">
                                <h1><span class="aa">13</span><span></span></h1>
                                <h5>Awards Win</h5>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-3 col-md-6">
                    <div class="single-counter-box">
                        <div class="counter-content">
                            <div class="counter-title">
                                <h1><span class="aa">10</span><span>+</span></h1>
                                <h5>Years Experience</h5>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--==================================================-->
    <!-- Start testimonial-area -->
    <!-- 隐藏 -->
    <!--==================================================-->
    <div class="testimonial-area d-none">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <div class="section-title">
                        <div class="sub-title">
                            <h5>testimonial</h5>
                        </div>
                        <div class="main-title">
                            <h3>Client Review<span>.</span></h3>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-lg-6">
                    <div class="testimonial-left">
                        <div class="left-title">
                            <h5>What Client Say?</h5>
                            <h3>Read My Clients Feedback</h3>
                            <p>Monotonectally orchestrate professionals supply chains whereas metrics. Globally
                                procrastinate backward-compatible application action items. Collaboratively enhance</p>
                            <p>Assertively synergize high standards in infrastructures with cross- media architectures.
                                Compellingly optimize B2B supply.</p>
                        </div>
                        <div class="left-button">
                            <a href="#"><i class="flaticon flaticon-man-1"></i> Hire Me Now</a>
                        </div>
                    </div>
                </div>
                <div class="col-lg-6">
                    <div class="testimonial-right">
                        <div class="owl-carousel testi_list">
                            <div class="single-testi-box">
                                <div class="testi-thumb">
                                    <img src="static/picture/tst1.png" alt="">
                                </div>
                                <div class="testi-title">
                                    <h2>Alex John</h2>
                                    <span>UI Dsigner</span>
                                </div>
                                <div class="testi-text">
                                    <p>Monotonectally orchestrates professionals supply chain is metrics. Globally
                                        procrastinate backward-compatible action items. Collaboratively enhance
                                        orchestrates profe supply chains metrics procrastinate</p>
                                </div>
                                <div class="testi-icon">
                                    <ul>
                                        <li><i class="fa fa-star"></i></li>
                                        <li><i class="fa fa-star"></i></li>
                                        <li><i class="fa fa-star"></i></li>
                                        <li><i class="fa fa-star"></i></li>
                                        <li><i class="fa fa-star"></i></li>
                                    </ul>
                                    <span> / 3</span>
                                </div>
                                <div class="testi-shape">
                                    <img src="static/picture/quote.png" alt="">
                                </div>
                            </div>
                            <div class="single-testi-box">
                                <div class="testi-thumb">
                                    <img src="static/picture/tst1.png" alt="">
                                </div>
                                <div class="testi-title">
                                    <h2> John Abraham</h2>
                                    <span>UI Dsigner</span>
                                </div>
                                <div class="testi-text">
                                    <p>Monotonectally orchestrates professionals supply chain is metrics. Globally
                                        procrastinate backward-compatible action items. Collaboratively enhance
                                        orchestrates profe supply chains metrics procrastinate</p>
                                </div>
                                <div class="testi-icon">
                                    <ul>
                                        <li><i class="fa fa-star"></i></li>
                                        <li><i class="fa fa-star"></i></li>
                                        <li><i class="fa fa-star"></i></li>
                                        <li><i class="fa fa-star"></i></li>
                                        <li><i class="fa fa-star"></i></li>
                                    </ul>
                                    <span> / 4</span>
                                </div>
                                <div class="testi-shape">
                                    <img src="static/picture/quote.png" alt="">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--==================================================-->
    <!-- Start pricing plan Area -->
    <!-- 隐藏 -->
    <!--==================================================-->
    <div class="pricing-plan d-none">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <div class="section-title">
                        <div class="sub-title">
                            <h5>MY PRICING</h5>
                        </div>
                        <div class="main-title">
                            <h3>Pricing Plan<span>.</span></h3>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-lg-4 col-md-6">
                    <div class="single-pricing-box">
                        <div class="pricing-content">
                            <div class="pricing-title">
                                <h4>BASIC</h4>
                                <h3>Powerful Design</h3>
                                <p>[Elementor Pro]</p>
                                <span class="dlr">$</span>
                                <span class="tk">5.68</span>
                                <span class="mnt">/ Project</span>
                            </div>
                            <div class="pricing-body">
                                <ul>
                                    <li>WordPress Installation</li>
                                    <li>Theme Upload & Customize</li>
                                    <li>Server Installation</li>
                                    <li>Dedicated Supports</li>
                                    <li class="last-child">Lifetime Gurenty</li>
                                </ul>
                            </div>
                        </div>
                        <div class="pricing-button">
                            <a href="#">Purches Now</a>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 col-md-6">
                    <div class="single-pricing-box upper">
                        <div class="pricing-content">
                            <div class="pricing-title">
                                <h4>STANDARD</h4>
                                <h3>Powerful Design</h3>
                                <p>[Elementor Pro]</p>
                                <span class="dlr">$</span>
                                <span class="tk">5.68</span>
                                <span class="mnt">/ Project</span>
                            </div>
                            <div class="pricing-body">
                                <ul>
                                    <li>WordPress Installation</li>
                                    <li>Theme Upload & Customize</li>
                                    <li>Server Installation</li>
                                    <li>Dedicated Supports</li>
                                    <li class="last-child">Lifetime Gurenty</li>
                                </ul>
                            </div>
                        </div>
                        <div class="pricings-buttons">
                            <a href="#">Purches Now</a>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 col-md-6">
                    <div class="single-pricing-box">
                        <div class="pricing-content">
                            <div class="pricing-title">
                                <h4>PREMIUM</h4>
                                <h3>Powerful Design</h3>
                                <p>[Elementor Pro]</p>
                                <span class="dlr">$</span>
                                <span class="tk">5.68</span>
                                <span class="mnt">/ Project</span>
                            </div>
                            <div class="pricing-body">
                                <ul>
                                    <li>WordPress Installation</li>
                                    <li>Theme Upload & Customize</li>
                                    <li>Server Installation</li>
                                    <li>Dedicated Supports</li>
                                    <li class="last-child">Lifetime Gurenty</li>
                                </ul>
                            </div>
                        </div>
                        <div class="pricing-button">
                            <a href="#">Purches Now</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--==================================================-->
    <!-- Start Search Popup Area -->
    <!-- 隐藏 -->
    <!--==================================================-->
    <div class="blog-area d-none" id="blog">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <div class="section-title">
                        <div class="sub-title">
                            <h5>LATEST ARTICLES</h5>
                        </div>
                        <div class="main-title">
                            <h3>My Blog<span>.</span></h3>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-lg-4 col-md-6">
                    <div class="single-blog-box">
                        <div class="blog-thumb">
                            <img src="static/picture/blog1.jpg" alt="">
                            <div class="blog-button">
                                <a href="#">Design</a>
                            </div>
                        </div>
                        <div class="blog-title">
                            <span>March 8, 2022</span>
                            <h2><a href="blog-details.html">Products Desiging</a></h2>
                            <p>Quickly expedite interactive Modernpromote deliverables Lorem </p>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 col-md-6">
                    <div class="single-blog-box">
                        <div class="blog-thumb">
                            <img src="static/picture/blog2.jpg" alt="">
                            <div class="blog-button">
                                <a href="#">Service</a>
                            </div>
                        </div>
                        <div class="blog-title">
                            <span>March 8, 2022</span>
                            <h2><a href="blog-details.html">Today Up to 20% Sales</a></h2>
                            <p>Quickly expedite interactive Modernpromote deliverables Lorem </p>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 col-md-6">
                    <div class="single-blog-box">
                        <div class="blog-thumb">
                            <img src="static/picture/blog3.jpg" alt="">
                            <div class="blog-button">
                                <a href="#">Design</a>
                            </div>
                        </div>
                        <div class="blog-title">
                            <span>March 8, 2022</span>
                            <h2><a href="blog-details.html">Connect to Platforms</a></h2>
                            <p>Quickly expedite interactive Modernpromote deliverables Lorem </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--==================================================-->
    <!-- Start Search Popup Area -->
    <!-- 隐藏 -->
    <!--==================================================-->
    <div class="contact-area d-none" id="contact-1">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <div class="section-title">
                        <div class="sub-title">
                            <h5>CONTACT INFO</h5>
                        </div>
                        <div class="main-title">
                            <h3>Get in Touch<span>.</span></h3>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row top">
                <div class="col-lg-6 col-md-6">
                    <div class="contact thumb">
                        <img src="static/picture/single2.png" alt="">
                    </div>
                </div>
                <div class="col-lg-6 col-md-6">
                    <div class="single-contact-box">
                        <div class="contact-title">
                            <h5>Message</h5>
                            <h3>Write Me Something</h3>
                        </div>
                        <div class="contact-text">
                            <p><span>Call Me</span> : +98 123 (456) 789</p>
                            <p><span>E-Mail</span> : example@yahoo.com</p>
                        </div>
                        <form action="#" method="POST" id="dreamit-form">
                            <div class="row">
                                <div class="col-lg-6 col-md-6">
                                    <div class="form_box">
                                        <input type="text" name="name" placeholder="Name">
                                    </div>
                                </div>
                                <div class="col-lg-6 col-md-6">
                                    <div class="form_box">
                                        <input type="text" name="email" placeholder="Email">
                                    </div>
                                </div>
                                <div class="col-lg-12 col-md-12">
                                    <div class="form_box">
                                        <input type="text" name="Subject" placeholder="Subject">
                                    </div>
                                </div>
                                <div class="col-lg-12 col-md-12">
                                    <div class="form_box">
                                        <textarea name="massage" id="massage" cols="30" rows="10"
                                            placeholder="Your Massage"></textarea>
                                    </div>
                                    <div class="form-button">
                                        <button type="submit">Send Message</button>
                                    </div>
                                </div>
                            </div>
                        </form>
                        <div id="status"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--==================================================-->
    <!-- Start Search Popup Area -->
    <!-- 隐藏 -->
    <!--==================================================-->
    <div class="footer-area d-none">
        <div class="container-fluid">
            <div class="row">
                <div class="col-lg-6 col-md-6">
                    <div class="copy-right">
                        <p>Copyright &copy; 2023.Company name All rights reserved.<a target="_blank"
                                href="https://www.17sucai.com/">&#x7F51;&#x9875;&#x6A21;&#x677F;</a></p>
                    </div>
                </div>
                <div class="col-lg-6 col-md-6">
                    <div class="copy-right-icon">
                        <ul>
                            <li><a href="#"><i class="fa fa-facebook"></i></a></li>
                            <li><a href="#"><i class="fa fa-twitter"></i></a></li>
                            <li><a href="#"><i class="fa fa-instagram"></i></a></li>
                            <li><a href="#"><i class="fa fa-behance"></i></a></li>
                            <li><a href="#"><i class="fa fa-dribbble"></i></a></li>
                            <li><a href="#"><i class="fa fa-send"></i></a></li>
                            <li><a href="#"><i class="fa fa-qq"></i></a></li>
                            <li><a href="#"><i class="fa fa-wechat"></i></a></li>
                            <!-- <li><a href="#"><i class="fa fa-phone"></i></a></li> -->
                            <li><a href="#"><i class="fa fa-phone-square"></i></a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--==================================================-->
    <!-- Start Search Popup Area -->
    <!-- 底部 -->
    <!--==================================================-->
    <div class="footerboxs" id="contact">
        <div class="container">
            <div class="row">
                <div class="copy-right-icon footer-box">
                    <ul class="box-1">
                        <!-- <li><a href="#"><i class="fa fa-dribbble"></i></a></li> -->
                        <!-- <li><a href="#"><i class="fa fa-wechat"></i></a></li> -->
                        <!-- <li><a href="#"><i class="fa fa-phone"></i></a></li> -->
                        <li><a href="JavaScript: void(0)"><i class="fa fa-qq"></i></a><span>845388338</span></li>
                        <li><a href="JavaScript: void(0)"><i class="fa fa-phone-square"></i></a><span>17302021619</span>
                        </li>
                        <li><a href="#"><i class="fa fa-send"></i></a><span>845388338@qq.com</span></li>
                        <li class="img-box"><img src="static/image/weixin/weixin.png" alt="微信"></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <div class="footer-area copyright">Copyright © 2023. Swaveye9060 版权所有</div>







    <!--==================================================-->
    <!-- Start Search Popup Area -->
    <!--==================================================-->
    <div class="search-popup">
        <button class="close-search style-two"><i class="fa fa-times"></i></button>
        <button class="close-search"><i class="fas fa-arrow-up"></i></button>
        <form method="post" action="#">
            <div class="form-group">
                <input type="search" name="search-field" value="" placeholder="Search Here" required="">
                <button type="submit"><i class="fa fa-search"></i></button>
            </div>
        </form>
    </div>

    <!-- scroll strat============  -->
    <div class="scroll-area">
        <div class="top-wrap">
            <div class="go-top-btn-wraper">
                <div class="go-top go-top-button">
                    <i class="fa fa-angle-double-up" aria-hidden="true"></i>
                    <i class="fa fa-angle-double-up" aria-hidden="true"></i>
                </div>
            </div>
        </div>
    </div>
    <!-- scroll end============  -->



    <!-- jquery js -->
    <script src="static/js/jquery-3.2.1.min.js"></script>
    <!-- bootstrap js -->
    <script src="static/js/bootstrap.min.js"></script>
    <!-- carousel js -->
    <script src="static/js/owl.carousel.min.js"></script>
    <!-- counterup js -->
    <script src="static/js/jquery.counterup.min.js"></script>
    <!-- waypoints js -->
    <script src="static/js/waypoints.min.js"></script>
    <!-- wow js -->
    <script src="static/js/wow.js"></script>
    <!-- imagesloaded js -->
    <script src="static/js/imagesloaded.pkgd.min.js"></script>
    <!-- venobox js -->
    <script src="static/js/venobox.js"></script>
    <!-- ajax mail js -->
    <script src="static/js/ajax-mail.js"></script>
    <!--  animated-text js -->
    <script src="static/js/animated-text.js"></script>
    <!-- venobox min js -->
    <script src="static/js/venobox.min.js"></script>
    <!-- isotope js -->
    <script src="static/js/isotope.pkgd.min.js"></script>
    <!-- jquery nivo slider pack js -->
    <script src="static/js/jquery.nivo.slider.pack.js"></script>
    <!-- jquery meanmenu js -->
    <script src="static/js/jquery.meanmenu.js"></script>
    <script src="static/js/popper.min.js"></script>
    <!-- jquery scrollup js -->
    <script src="static/js/jquery.scrollUp.js"></script>
    <!-- theme js -->
    <script src="static/js/theme.js"></script>
    <script src="static/js/jquery.barfiller.js"></script>

    <!-- jquery js -->




    <script>
        $(document).ready(function () {

            $('.aa').counterUp({
                delay: 10,
                time: 1000
            });


        });
    </script>

    <script>
        (function ($) {
            $('.accordion > li:eq(0) a').addClass('active').next().slideDown();

            $('.accordion a').click(function (j) {
                var dropDown = $(this).closest('li').find('p');

                $(this).closest('.accordion').find('p').not(dropDown).slideUp();

                if ($(this).hasClass('active')) {
                    $(this).removeClass('active');
                } else {
                    $(this).closest('.accordion').find('a.active').removeClass('active');
                    $(this).addClass('active');
                }

                dropDown.stop(false, true).slideToggle();

                j.preventDefault();
            });
        })(jQuery);
    </script>


</body>

</html>